<template>
	<view class="container">
		<live-player
			id="livePlayerContext"
			:src="truePlaySrc"
			mode="live"
			autoplay
			class="video"
			object-fit="contain"
			@statechange="liveStateChange"
			@fullscreenchange="fullscreenchange"
		>
			<!-- 直播倒计时 南京 -->
			<cover-view v-if="showClock" class="top-right">
				上课倒计时 {{clockStr}}
			</cover-view>
			<cover-view v-if="showStatus" class="bottom-left">
				<cover-view class="cover"></cover-view>
				<cover-view class="text">{{statusMsg}}</cover-view>
			</cover-view>
			<!-- 学校logo -->
			<cover-view v-if="logoSrc" class="logo-border">
				<cover-image :src="logoSrc" class="logo-image"></cover-image>
			</cover-view>
			<!-- 直播已结束 -->
			<cover-view class="cover-view end-container" :style="{backgroundColor: theme.primary}" v-if="isEnd">
				<cover-view>直播已结束...</cover-view>
				<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
			</cover-view>
			<!-- 直播尚未开始 -->
			<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="isError">
				<cover-view>直播课程尚未开始...</cover-view>
				<cover-view class="cover-inner resume" @tap="resume">刷新</cover-view>
				<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
			</cover-view>
			<!-- 加载中 -->
			<cover-view class="cover-view" :style="{backgroundColor: theme.primary}" v-if="isWaiting">
				<cover-view>加载中</cover-view>
				<cover-image src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
			</cover-view>
			<cover-image v-if="!isError && !isWaiting" src="../../static/img/exitFullScreen.png" class="image-btn" :class="{ 'hidden-btn': !isFullScreen }" @tap="exitFullScreen"></cover-image>
			<!-- 全屏时 投票面板 -->
			<cover-view class="vote-cover" v-if="isFullScreen && isVote">
				<cover-view class="vote-panel">
					<cover-view class="panel-title">投票</cover-view>
					<cover-view class="panel-tip">
						<cover-view class="tip-content">
							距离投票结束还有<cover-view class="tip-time">{{currentTime}}秒</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="btn-area">
						<cover-view 
						v-if="!item.isMiss" 
						v-for="(item, index) in voteInfo" 
						:key="index" 
						class="panel-btn" 
						@tap="voteExec(item.id, item.voteItemName)">
							{{item.voteItemName}}
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</live-player>
		<!-- 投票面板 -->
		<cover-view class="vote-cover" v-if="!isFullScreen && isVote">
			<cover-view class="vote-panel">
				<cover-view class="panel-title">投票</cover-view>
				<cover-view class="panel-tip">
					<cover-view class="tip-content">
						距离投票结束还有<cover-view class="tip-time">{{currentTime}}秒</cover-view>
					</cover-view>
				</cover-view>
				<cover-view  class="btn-area">
					<cover-view 
						v-if="!item.isMiss" 
						v-for="(item, index) in voteInfo" 
						:key="index" 
						class="panel-btn" 
						@tap="voteExec(item.id, item.voteItemName)">
						{{item.voteItemName}}
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<view class="class-info">
			<view class="title">{{ courseName }}</view>
			<jIcon name="icon-fullscreen" size="40" @tap.native="fullScreen"></jIcon>
		</view>
		<view v-if="showTabs" class="header-tabs">
			<tui-tabs 
			:isFixed="false" 
			:sliderWidth="180" 
			:tabs="tabs" 
			:unlined="true" 
			:color="theme.danger"
			:selectedColor="theme.danger"
			:sliderBgColor="theme.danger">
		</tui-tabs>
		</view>
		<!-- 互动明细部 -->
		<view v-if="currentTab == 0" class="chat-container" @touchstart="canScroll = false">
			<view v-if="!canScroll && !showInput" class="refresh-btn" @tap.stop="goBottom">
				<image class="down-icon" src="../../static/icon/down.png"></image>
			</view>
			<mescroll-uni 
				@init="mescrollInit" 
				:fixed="false" 
				:down="downOption" 
				:up="upOption"
				class="chat-list">
				<view class="chat-item" v-for="(item, index) in chatList" :key="index">
					<view  v-if="item.userId == 'system'" class="system-info">
						<view class="title">
							<text class="nickName" :style="{color: theme.danger}">{{item.nickName}}</text>
							<text class="dateTime">{{item.dateTime}}</text>
						</view>
						<view class="text-container">{{item.content}}</view>
					</view>
					<view v-else>
						<view class="user-info" :class="item.position">
							<view class="nickName">
								<span v-if="item.userId == 'teacher'" :style="{backgroundColor:theme.warning}">教师</span>
								{{ item.nickName }}
							</view>
							<view class="dateTime">{{ item.dateTime }}</view>
						</view>
						<view class="text-container" :class="item.position">
							<view class="arrow" :class="item.position" :style="{borderBottomColor: `${item.position == 'left'?theme.common:theme.success}`}"></view>
							<text class="text" :class="item.position" :style="{backgroundColor: `${item.position == 'left'?theme.common:theme.success}`}">{{ item.content }}</text>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<view v-if="currentTab == 0" class="foot">
			<view 
				class="input-placeholder" 
				:class="{ hidden: showInput, reject: !allow }" 
				@tap="goToComment">
				{{ input_placeholder }}
			</view>
			<chat-input 
				:class="{ hidden: !showInput }" 
				@send-message="send_comment" 
				:show="showInput" 
				@blur="blur" 
				:focus="focus" 
				:maxLen="50" 
				:placeholder="input_placeholder">
			</chat-input>
		</view>
	</view>
</template>

<script>
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import MescrollMixin from 'mescroll-uni/mescroll-mixins.js';
import chatInput from '@/components/im-chat/chatinput.vue';
import tuiTabs from '@/components/tui-tabs/tui-tabs.vue'
import { reportPlayTime } from '@/api/album.js';
import { NJJLDX } from '@/dxType.js';
import { mapState } from 'vuex';
import webSocket from '@/util/socketApi/index.js';
import chatMixin from './mixin/chatMixin.js'; // 聊天互动
import voteMixin from './mixin/voteMixin.js'; // 课情反馈
import startEndCourseMixin from './mixin/startEndCourseMixin.js'; // 上下课
import reportPlayerMixin from './mixin/reportPlayerMixin.js'; // 观看时长上报
import banChatMixin from './mixin/banChatMixin.js'; // 禁言
import commonMixin from './mixin/commonMixin.js'; // 杂项
export default {
	mixins: [
		MescrollMixin, 
		chatMixin, 
		voteMixin, 
		startEndCourseMixin, 
		reportPlayerMixin, 
		banChatMixin, 
		commonMixin
	],
	components: { 
		MescrollUni, 
		chatInput, 
		tuiTabs 
	},
	data() {
		return {
			theme: this.$theme,
			// web socket
			socket: '',
			Id: '',
			classId: '',
			// 课程名
			courseName: '',
			// 视频左上角logo
			logoSrc: '',
			livePlayer: null,
			// 拉流url拷贝
			bkTruePlaySrc: '',
			// 拉流url
			truePlaySrc: '',
			// 视频播放是否出错
			isError: false,
			// 视频错误消息
			errorMsg: '',
			// 视频是否处在加载中
			isWaiting: true,
			// 播放器全屏状态
			isFullScreen: false,
			// 是否显示直播状态
			showStatus: '',
			// 直播状态信息
			statusMsg: '',
			// 是否显示tabs切换栏 reject
			showTabs: true
		}
	},
	computed: {
		...mapState({
			clientUserId: state=>state.user.clientUserId,
			clientUserName: state=>state.user.clientUserName,
			socketUrl: state=>state.common.socketUrl,
			appid: state=>state.common.appid
		})
	},
	onLoad(e) {
		this.livePlayer = wx.createLivePlayerContext('livePlayerContext')
		this.Id = e.Id
		if(e.courseName){
			this.courseName = e.courseName
		}
		// 公开课不显示签到栏
		if(e.isOpen){
			this.showTabs = false;
		}
		this.initData();
	},
	onUnload() {
		this.socket.closeSocket()
	},
	methods: {
		// 初始化直播数据
		initData(){
			this.getLivePlayerInfo().then(res=>{
				this.logoSrc = res.channelLogo
				this.truePlaySrc = res.livePlayerUrl
				this.bkTruePlaySrc = res.livePlayerUrl
				this.classId = res.classId;
				this.costTime = res.costTime	
				this.clockTime = res.clockTime // 倒计时
				this.showStatus = true;
				this.statusMsg = '正在寻找直播间...';
				this.initSocket();
			}).catch(err=>{
				this.isError = true
				this.isWaiting = false
				this.errorMsg = err.error.message
			}).finally(_=>{
				// 南京金陵老年大学显示倒计时时钟
				if(NJJLDX.appid == this.appid){
					if(this.clockTime && this.clockTime > 0){
						this.setClock();
					}
				}
			})
		},
		// socket初始化
		initSocket(){
			let wssUrl = `${this.socketUrl}ws?classid=${this.classId}&itemid=${this.Id}&userId=${this.clientUserId}`;
			this.socket = webSocket;
			this.socket.openSocket(wssUrl);
			this.socket.onSocketMessage(resp=>{
				this.switchData(resp);
			})
			this.socket.onSocketOpen(resp=>{
				console.info('open success: ', resp);
			})
			let that = this;
			this.socket.onSocketError(resp=>{
				setTimeout(()=>{
					that.socket.openSocket(wssUrl);
				}, 5000)
			})
		},
		// 区分处理
		switchData(e){
			switch(e.messageType){
				case 1: this.appendChatList(e.data); break; // 互动数据
				case 2: this.getVote(e.data); break; // 投票数据
				case 4: this.getEndInfo(e.data); break; // 下课
				case 5: this.getAllowSpeach(e.data); break; // 禁言
			}
		},
		// 直播状态变更
		liveStateChange(e) {
			let code = e.detail.code;
			if (code == 2001){
				this.statusMsg = `CODE: ${code} 连接中, 等待进入`;
			}
			else if (code == 2003) {
				uni.hideLoading();
				this.isWaiting = false;
				this.isError = false;
				this.statusMsg = `CODE: ${code} 连接成功, 进入直播间`;
				setTimeout(()=>{
					this.showStatus = false;
				}, 1000);
				this.reportPlayer();
			}
			else if (code == '-2301'||code=='-2302') {
				this.isError = true;
				this.isWaiting = false;
				this.clearReportPlayer();
				uni.hideLoading();
				this.statusMsg = `CODE: ${code} 啊哦.. 没有连接到直播间`;
				setTimeout(()=>{
					this.showStatus = false;
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #eaeef1;
}
.video {
	width: 100%;
	height: 30vh;
	position: relative;
}

/* 倒计时时钟 */
.top-right, .bottom-left{
	position: absolute;
	font-size: 30rpx;
	letter-spacing: 2rpx;
	color: #fff;
	z-index: 999;
}
.top-right{
	right: 10rpx;
	top: 10rpx;
}
.bottom-left{
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10rpx;
	box-sizing: border-box;
	.cover{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #000;
		opacity: .4;
	}
	.text{
		font-size: 25rpx;
		color: #fff;
		z-index: 1;
	}
}

@keyframes show-panel{
	from{transform: scale(0);}
	to{transform: scale(1);}
}
.vote-cover{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	.vote-panel{
		animation: show-panel .5s;
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		.panel-title{
			text-align: center;
			font-size: 40rpx;
			color: #2b2b2b;
			padding: 20rpx 0;
		}
		.panel-tip{
			font-size: 30rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 20rpx 0;
			.tip-content{
				display: flex;
				color: #545454;
				font-size: 30rpx;
				.tip-time{
					font-weight: bold;
					color: #232323;
				}
			}
		}
		.btn-area{
			margin-top: 30rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.panel-btn{
				width: 100rpx;
				height: 40rpx;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #666666;
				font-size: 30rpx;
				color: #686868;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.logo-border{
	position: absolute;
	top: 5rpx;
	left: 5rpx;
	z-index: 999;
	.logo-image{
		width: 200rpx;
	}
}
.cover-view {
	width: 100%;
	height: 100%;
	color: #f8f8f8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	.cover-inner {
		display: flex;
		align-items: center;
		padding: 5px 10px;
		margin-top: 10px;
		&.resume {
			display: inline-block;
			width: 80rpx;
			background: #4cd964;
			color: #f1f1f1;
			border-radius: 5px;
		}
	}
	&.end-container{
		z-index: 998;
	}
}

.header-tabs{
	height: 4vh;
	border-bottom: 1px solid #c0c0c0;
}
.class-info {
	width: 100%;
	height: 4vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	.title {
		flex-basis: 60%;
		flex-grow: 0;
		flex-shrink: 0;
		overflow: hidden;
		text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
		display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
		-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 1; /* 文本需要显示多少行 */
	}
}
.chat-container {
	width: 100%;
	flex: 1;
	overflow: auto;
	display: flex;
	justify-content: center;
	background: #eaeef1;
	@keyframes fade-in{
		from{opacity: 0;}
		to{opacity: .6;}
	}
	.refresh-btn{
		position: fixed;
		bottom: 100rpx;
		right: 10rpx;
		background-color: #000;
		opacity: .6;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: fade-in 1s;
		z-index: 9;
		.down-icon{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.chat-list {
		width: 95%;

		.chat-item {
			width: 100%;
			padding: 8rpx 0;
			font-size: 34rpx;
			display: flex;
			flex-direction: column;
			.system-info{
				width: 100%;
				text-align: center;
				padding: 0 90rpx;
				box-sizing: border-box;
				.title{
					margin: 10rpx 0;
					.nickName{
						font-size: 30rpx;
						margin: 10rpx;
					}
					.dateTime{
						font-size: 25rpx;
						margin-right: 10rpx;
					}
				}					
				.text-container{
					font-size: 30rpx;
				}
			}
			.user-info {
				display: flex;
				align-items: center;
				&.right {
					justify-content: flex-end;
				}
				.avatar {
					width: 50rpx;
					height: 50rpx;
					flex-shrink: 0;
					.avatar-img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.nickName,
				.dateTime {
					font-size: 26rpx;
					padding-left: 10rpx;
				}
				.dateTime {
					flex: 0;
				}
				.nickName {
					overflow: hidden;
					text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
					display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
					-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-line-clamp: 1; /* 文本需要显示多少行 */
					span{
						padding: 10rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
						color: #fff;
						margin-right: 10rpx;
					}
				}
			}
			.text-container {
				display: flex;
				flex-direction: column;
				padding: 0 10rpx;
				box-sizing: border-box;
				&.left {
					align-items: flex-start;
				}
				&.right {
					align-items: flex-end;
				}
				.arrow {
					width: 0;
					height: 0;
					border: 15rpx solid transparent;
					&.left {
						border-bottom-color: #ffffff;
						margin-left: 20rpx;
					}
					&.right {
						margin-right: 20rpx;
					}
				}
				.text {
					border-radius: 10px;
					padding: 0 5px;
					max-width: 80%;
					min-width: 50rpx;
					text-align: left;
					&.left {
						background: #ffffff;
						color: #2c405a;
					}
					&.right {
						color: #ffffff;
					}
				}
			}
		}
	}
}
.foot {
	width: 100%;
	background-color: #fff;
	border-top: 1rpx solid #c7c7c7;
	.input-placeholder {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		margin-top: 5px;
		margin-bottom: 5px;
		background: #eaeef1;
		border-radius: 10px;
		height: 50rpx;
		&.reject {
			background: #999999;
			color: #f1f1f1;
		}
	}
}

.hidden-btn{
	display: none;
}
.image-btn{
	position: absolute;
	right: 50rpx;
	bottom: 50rpx;
	width: 50rpx;
	height: 50rpx;
}

.check-content{
	width: 100%;
	height: 61.2vh;
	display: flex;
	flex-direction: column;
	font-size: 30rpx;
	overflow: auto;
	.check-title{
		display: flex;
		justify-content: center;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
	}
	.check-item{
		display: flex;
		flex-wrap: wrap;
		.mescroll-col{
			width: 33.3%;
			display: flex;
			.mescroll-item{
				background-color: #fff;
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				margin: 10rpx;
				padding: 10rpx;
				color: #666;
				height: 60rpx;
			}
		}
	}
	
}
</style>
